<template>
  <div class="page-wrapper">
    <view v-if="!signSuccess" class="fixed-btm">
      <view class="ver-code">
        <view class="ver-tip">
          <img src="/contract/img/dunpai.png" alt="">
          <p>验证码确认是为了增强电子合同签署的证据链，从签约人的自主行为来增强电子合同的法律效力.</p>
        </view>
        <view class="sendcode">
          <view class="sendcode-title">获取验证码</view>
          <view class="sign-form">
            <view class="input-box">
              <input
                v-model="phone"
                placeholder="输入手机号"
                placeholder-class="placeholder"
                class="input"
                disabled
                type="number"
              >
            </view>
            <view class="input-box">
              <input
                v-model="code"
                placeholder="输入验证码"
                placeholder-class="placeholder"
                class="input"
                type="text"
              >
              <button
                :disabled="disabledGetVerificationCode"
                class="input-button"
                @click="getVerificationCode"
              >{{ showTimmer ? second :text }}</button>
            </view>
          </view>
        </view>
      </view>
      <view class="btnrow">
        <button class="btn btn-sign" @click="backUpdate">修改签名</button>
        <button :disabled="disabledSubmit" class="btn btn-preview" @click="confirmSign">确认签署</button>
      </view>
    </view>
    <!-- 签署成功展示 -->
    <div v-if="signSuccess" class="tip-wrapper">
      <div class="tippic">
        <img src="/contract/img/chenggong.png" alt="">
      </div>
      <p class="tips bold">签署成功</p>
      <p class="tips">跳转我的合同…</p>
    </div>
  </div>
</template>
<script>
import { checkPhone } from "@/utils/validate"
import { myContractList, sendCodeReq, personSignReq, setJpgToAppendix } from '@/services/contract'
import { mapState } from 'vuex'
export default {
  onLoad: function(options){
    this.sealString = uni.getStorageSync('sign')
    if(options.id) {
      this.contractId = options.id
    } else {
      this.contractId = uni.getStorageSync('contractIdP')
    }
  },
  data(){
    return{
      contractlist: [],
      phone: '',
      code: '',
      signSuccess: false,
      showTimmer: false,
      second: 60,
      text: "获取验证码",
      disabledGetVerificationCode: false,
      disabledSubmit: false,
      sealString: '',
      contractId: '',
      hasConfirm: false
    }
  },
  computed: {
    ...mapState(['user', 'settings'])
  },
  created(){
    this.getContractList()
  },
  mounted(){
    this.phone = this.user.phone
  },
  methods: {
    sendCode(){
      sendCodeReq(this.phone).then(() => {
        uni.showToast({
          title: '验证码发送成功',
          icon: 'none',
          duration: 2000
        })
        this.showTimmer = true
        this.disabledGetVerificationCode = true
        const timer = setInterval(() => {
          this.second = this.second - 1
          if (this.second === 0) {
            this.disabledGetVerificationCode = false
            this.showTimmer = false
            this.second = 60
            this.text = "重新获取"
            clearInterval(timer)
          }
        }, 1000)
      }).catch((err) => {
        console.log('debug log --> ', err)
        uni.showToast({
          title: err,
          icon: "none",
          duration: 2000
        })
      })
    },
    getVerificationCode() {
      // 手机号格式校验
      if (checkPhone(this.phone)) {
        if(this.hasConfirm){
          this.sendCode()
        }else{
          uni.showModal({
            title: '承诺声明',
            content: '\n本人已明确知晓并确定该合同\n为本人签署，知晓并接受合同\n所述内容，并郑重承诺如因\n非本人签署问题或因本人原因为\n第三方及派遣单位造成损失的，\n责任自负。并愿承担相关法律责任。\n',
            cancelText: '不同意',
            confirmText: '本人确认',
            confirmColor: this.settings.theme,
            success: (res) => {
              if(res.confirm) {
                this.hasConfirm = true
                this.sendCode()
              }
            }
          })
        }
      } else {
        uni.showToast({
          title: "手机号格式错误",
          icon: "none",
          duration: 2000
        })
      }
    },
    confirmSign() {
      this.disabledSubmit = true
      uni.showLoading({
        title: '合同签署中...'
      })
      personSignReq({
        code: this.code,
        contractId: this.contractId,
        sealString: this.sealString
      }).then(async (res) => {
        this.disabledSubmit = false
        uni.hideLoading()
        this.signSuccess = true
        uni.showLoading({
          title: '文件上传中...'
        })
        await setJpgToAppendix(this.contractId)
        uni.hideLoading()
        const timer = setTimeout(() => {
          uni.navigateBack({
            delta: 3
          })
          clearTimeout(timer)
        }, 1000)
      }).catch(err => {
        console.log('debug log --> ', err)
        this.disabledSubmit = false
        uni.hideLoading()
        uni.showToast({
          title: err.message,
          icon: "none",
          duration: 2000
        })
      })
    },
    getContractList(){
      myContractList().then(res => {
        this.contractlist = res.data
      })
    },
    backUpdate(){
      uni.navigateBack()
    }
  }
}
</script>
<style lang="scss">
.page-wrapper{
  width:100%;
  .contract-content{
    width: 100%;
    background: #fff;
    overflow: hidden;
  }
  .fixed-btm{
    width: 100%;
    text-align: center;
    z-index: 3;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 20px;
    box-sizing: border-box;
    height: 350px;
    background: $white;
    border-radius: 20px 20px 0px 0px;
    box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.08);
    .btnrow{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      .btn{
        width: 150px;
        height: 50px;
        border-radius:12px;
        font-size:14px;
        font-weight:400;
        line-height:50px;
      }
      button::after{
        outline: none;
        border: none;
      }
      .btn-sign{
        color: $fc2;
        background: $bg-gray;
        border: 1px solid $border;
      }
      .btn-preview{
        color: $white;
        background: $theme;
      }
    }
    .ver-tip{
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid $border;
      padding-bottom: 15px;
      img {
        width: 36px;
        height: 36px;
      }
      p {
        width: calc(100vw - 40px - 36px - 5px);
        height: 36px;
        font-size: 12px;
        font-weight: 400;
        color: $fc2;
        line-height: 17px;
        text-align: left;
      }
    }
    .sendcode{
      padding-top: 15px;
      .sendcode-title{
        font-size:18px;
        font-weight:500;
        color:rgba(51,51,51,1);
        line-height:25px;
        text-align: left;
      }
    }
  }
}
.tip-wrapper{
  width: 375px;
  height: 100vh;
  overflow-x: hidden;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 4;
  .tippic{
    img{
      display: block;
      width:168px;
      height:168px;
      margin: 104px auto 14px;
    }
  }
  .tips{
    width:308px;
    height:40px;
    font-size:14px;
    font-weight:400;
    color:rgba(156,156,156,1);
    line-height:20px;
    display: block;
    margin: 0 auto;
    text-align: center;
  }
  .bold{
    font-weight: 500;
    color:#565656;
  }
}
</style>
